<template>
  <el-dialog top="20px" :append-to-body="true" :close-on-click-modal="false" :visible.sync="visable" title="角色用户" width="950px" @close="closeDlg">
    <div class="main-bill-header">
      <table style="width:98%">
        <tr>
          <td width="40%">角色名称：<span style="font-weight:600;color:blue;">{{ entity.name }}</span></td>
          <td width="60%">角色编号：<span style="font-weight:600;color:blue;">{{ entity.code }}</span></td>
        </tr>
      </table>
    </div>
    <el-table
      ref="detailTable"
      v-loading="loading"
      stripe
      :data="detailList"
      border
      :height="330"
      class="rownum-table"
    >
      <el-table-column prop="loginName" label="账号" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="departmentName" label="所属部门" />
      <el-table-column prop="duty" label="职务" />
      <el-table-column prop="state" label="职位状态" width=" 0">
        <template slot-scope="scope">
          <span>{{ scope.row.stateName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="账号状态" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.status | statusFormat }}</span>
        </template>
      </el-table-column>
    </el-table>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="closeDlg">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import request from '@/utils/request'
export default {
  name: 'RoleUserShow',
  data() {
    return {
      loading: true,
      visable: false,
      entity: {
        name: '',
        code: ''
      },
      detailList: []

    }
  },
  methods: {
    // 获取数据
    show(role) {
      // clone
      this.entity = {}
      this.entity.name = role.name
      this.entity.id = role.id
      this.entity.code = role.code
      this.visable = true
      this.loading = true
      request({ url: '/sys/role/findUsersByRoleId', params: { id: role.id }, method: 'get' })
        .then(data => {
          this.detailList = data
          this.loading = false
        }).catch(err => {
          this.loading = false
          this.$message.error(err.message)
        })
    },

    closeDlg() {
      this.visable = false
      this.detailList = []
      this.entity.name = ''
      this.entity.code = ''
    }

  }
}
</script>

